<template>
  <h2>商品信息</h2>
  <div style="text-align: left">

    <el-form :model="condForm" label-width="120px" :inline="true">
      <el-form-item>
        <el-button type="primary" @click="openItemDialog">添加商品</el-button>
      </el-form-item>
      <el-form-item label="编号">
        <el-input v-model="condForm.itemNum" readonly/>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="condForm.itemName" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="condForm.statue" >
          <el-option label="上架" value="0" />
          <el-option label="下架" value="1" />
          <el-option label="删除" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryCondItem">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!-- 添加商品信息的对话框 -->
  <el-dialog
      v-model="dialogItemVisible"
      width="60%">
    <div style="text-align: left">
      商品图片:<!--  上传商品图片控件  -->

          <el-upload
              action="http://localhost:8081/uploadImg"
                     list-type="picture-card" :auto-upload="true"
              method="post"
              :on-success="handleAvatarSuccess">
            <el-icon>
              <Plus/>
            </el-icon>
            <template #file="{ file }">
              <div>
                <img class="el-upload-list__item-thumbnail"   :src="file.url" alt=""/>
                <span class="el-upload-list__item-actions">
              <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
              >
                <el-icon><zoom-in/></el-icon>
              </span>
                </span>
              </div>
            </template>

          </el-upload>
        <el-image v-for="img in imageUrls" :src="img" style="width: 138px;height: 138px"></el-image>

    </div>
    <el-form :model="itemForm" label-width="120px" :inline="true">

      <el-form-item label="名称">
        <el-input v-model="itemForm.itemName" />
      </el-form-item>
      <el-form-item label="编号">
        <el-input v-model="itemForm.itemNum" readonly/>
      </el-form-item>
      <el-form-item label="种类">
        <el-input v-model="itemForm.typeId" placeholder="请选择类型"
                  @click="openTypeDialog"/>
      </el-form-item>
      <el-form-item label="库存">
        <el-input v-model="itemForm.store" />
      </el-form-item>
      <el-form-item label="品牌" style="width: 34%">
        <el-select
            v-model="itemForm.brandId"
            class="m-2"
            placeholder="请选择供品牌"
        >
          <el-option
              v-for="item in brandList"
              :key="item.brandId"
              :label="item.brandName"
              :value="item.brandId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="仓库" style="width: 34%">
        <el-select
            v-model="itemForm.storeId"
            class="m-2"
            placeholder="请选择供仓库"
        >
          <el-option
              v-for="item in storeList"
              :key="item.storeId"
              :label="item.storeName"
              :value="item.storeId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="供应商" style="width: 34%">
        <el-select
            v-model="itemForm.supplyId"
            class="m-2"
            placeholder="请选择供应商"


        >
          <el-option
              v-for="item in supplyList"
              :key="item.supplyId"
              :label="item.supplyName"
              :value="item.supplyId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="产地" style="width: 34%">
        <el-select
            v-model="itemForm.placeId"
            class="m-2"
            placeholder="请选择供产地"


        >
          <el-option
              v-for="item in placeList"
              :key="item.placeId"
              :label="item.placeName"
              :value="item.placeId"
          />
        </el-select>

      </el-form-item>
      <el-form-item label="单位" style="width: 34%">
        <el-select
            v-model="itemForm.unitId"
            class="m-2"
            placeholder="请选择商品单位"


        >
          <el-option
              v-for="item in unitList"
              :key="item.unitId"
              :label="item.unitName"
              :value="item.unitId"
          />
        </el-select>

      </el-form-item>
      <el-form-item label="进价">
        <el-input v-model="itemForm.price" />
      </el-form-item>
      <el-form-item label="售价">
        <el-input v-model="itemForm.sellPrice" />
      </el-form-item>
      <el-form-item label="会员价">
        <el-input v-model="itemForm.vipPrice" />
      </el-form-item>
      <el-form-item label="详细介绍" style="width: 72%">
        <el-input v-model="itemForm.itemDesc" type="text"/>
      </el-form-item>
      <el-form-item label="生成日期">
        <el-date-picker
            v-model="itemForm.itemDate"
            type="date"
            placeholder="Pick a day"
            :size="size"
        />

      </el-form-item>
      <el-form-item label="保质期">
        <el-date-picker
            v-model="itemForm.endDate"
            type="date"
            placeholder="Pick a day"
            :size="size"
        />
      </el-form-item>

      <hr/>
      <el-form-item>
        <el-button type="primary" @click="saveItemForm">保存</el-button>
        <el-button>清空</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>
  <!-- 图片预览的对话框 -->
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>

<!-- 添加选择商品类型的对话框 -->
  <!-- 添加商品信息的对话框 -->
  <el-dialog
      v-model="typeDialog"
      width="40%">
    <h2>选择商品类型</h2>
    <el-tree
        :props="config"
        :data="categoryList"
        default-expand-all
        node-key="id"
        ref="treeRef"
        highlight-current="true"
        :expand-on-click-node="false"
        @node-click="handleClickNode">
    </el-tree>
    <el-button type="primary" @click="saveType">确认</el-button>
  </el-dialog>

<!-- 表格-->
  <el-table :data="itemList" :border="parentBorder" style="width: 100%">
    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
            <el-image :src="doImgs(props.row.imgs)" style="width: 200px;height: 100px"></el-image>

          <el-table :data="[props.row]" :border="childBorder">
            <el-table-column label="进价" prop="price" />
            <el-table-column label="销售价" prop="sellPrice" />
            <el-table-column label="会员价" prop="vipPrice" />
            <el-table-column label="生成日期" prop="itemDate" />
            <el-table-column label="过期日期" prop="endDate" />
            <el-table-column label="产地" prop="placeName" />
          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="编号" prop="itemNum" />
    <el-table-column label="名称" prop="itemName" />
    <el-table-column label="品牌" prop="brandName" />
    <el-table-column label="单位" prop="unitName" />
    <el-table-column label="状态">
      <template #default="scope">
        {{toStatue(scope.row.statue)}}
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" width="260px" >
      <template #default="scope">
        <el-button link type="primary" size="small" @click="editItem(scope.row)">修改</el-button>
        <el-button link type="primary" size="small" @click="downItem(scope.row.id)">下架</el-button>
        <el-button link type="primary" size="small" @click="openCustDialog(scope.row.id)">删除</el-button>
        <el-button link type="primary" size="small" @click="openBuyDialog(scope.row.id)">采购</el-button>
        <el-button link type="primary" size="small" @click="openOutDialog(scope.row)">出库</el-button>
      </template>
    </el-table-column>


  </el-table>
<!-- 分页组件 -->
  <el-pagination
      small
      background
      :page-size="3"
      :pager-count="10"
      layout="prev, pager, next"
      :total="total"
      class="mt-4" @current-change="handlerPageChange"
      :current-page.sync="currentPage"/>



  <!--商品采购对话框-->
  <el-dialog
      v-model="buyDialog"
      width="60%">
    <h2>商品采购</h2>

    <el-form :model="buyForm" label-width="120px">
      <el-form-item label="商品名称">
        {{buyForm.itemName}}
      </el-form-item>
      <el-form-item label="仓库">
        {{buyForm.storeName}}
      </el-form-item>
      <el-form-item label="供应商">
        {{buyForm.supplyName}}
      </el-form-item>
      <el-form-item label="产地">
        {{buyForm.placeName}}
      </el-form-item>
      <el-form-item label="预计采购量">
        <el-input v-model="buyForm.buyNum" style="width: 80%"/>
      </el-form-item>
      <el-form-item label="采购人">
        <el-input v-model="buyForm.buyUser" style="width: 80%"/>
      </el-form-item>

      <el-form-item label="采购人电话">
        <el-input v-model="buyForm.phone" style="width: 80%"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="saveBuyOrder">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>


<!-- 出库对话框组件 -->
  <el-dialog
      v-model="itemOutDialog"
      width="60%">
    <h2>商品采购</h2>

    <el-form :model="outForm" label-width="120px">
      <el-form-item label="商品名称">
        {{outForm.itemName}}
      </el-form-item>
      <el-form-item label="仓库">
        {{outForm.storeName}}
      </el-form-item>
      <el-form-item label="商品库存">
        {{outForm.store}}
      </el-form-item>
      <el-form-item label="出库数量">
        <el-input v-model="outForm.outNum" style="width: 80%"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="saveOutOrder">保存</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

</template>

<script setup>

import {onMounted, reactive, ref} from "vue";
import { Plus ,ZoomIn } from '@element-plus/icons-vue'
import axios from "axios";
import {ElMessage} from "element-plus";


//定义对话框状态
const dialogItemVisible = ref(false);
//声明表单
const itemForm = reactive({
  id: '',
  itemNum:'',
  itemName:'',
  typeId:'',
  store:0,
  brandId:'',
  storeId:'',
  supplyId:'',
  placeId:'',
  unitId:'',
  price:0.0,
  sellPrice:0.0,
  vipPrice:'0.0',
  itemDesc:'',
  itemDate:'',
  endDate: '',
  imgs:'',
  imgArr:[]


})
//声明变量保存处理添加和更新请求接口的url
var url="";
//定义函数打开添加商品对话框
function openItemDialog() {
  url="http://localhost:8081/addItem"; //处理新增请求的接口
  dialogItemVisible.value = true;
  //调用函数加载供应商列表
  loadSupplyList();
  //加载商品产地选项
  loadPlaceList();
  //加载商品单位选项
  queryUnitList();
  //加载商品品牌选项
  queryBrandList();
  //加载仓库选项
  queryStoreList();
  //调用函数获得商品编码
  getItemCode();
}
//声明变量保存需要预览的图片路径
const dialogImageUrl=ref(null);
//预览图片对话框的状态
const dialogVisible=ref(false);
function handlePictureCardPreview(file){
  console.log("======================"+file);
  dialogImageUrl.value = file.url;
  dialogVisible.value = true
}
//定义图片上传成功后的回调函数
function handleAvatarSuccess(path){
  console.log(path)
  itemForm.imgArr=[]; //如果重新上传图片清空原来的值
  //将响应的图片路径保存表单的imgs数组中
  itemForm.imgArr.push(path);
  //将原来回显的图片路径清空
  imageUrls.value=null;

}
//声明供应商列表
const supplyList=ref([]);
function loadSupplyList(){
  axios.get("http://localhost:8081/supplyList")
  .then((response)=>{
    supplyList.value=response.data;
  })
  .catch((error)=>{
    console.log(error);
  })
}
//声明产地列表集合数据
const placeList=ref([]);
function loadPlaceList(){
  axios.get("http://localhost:8081/placeList")
  .then((response)=>{
    placeList.value=response.data;
  })
  .catch((error)=>{
    console.log(error);
  });
}
//声明单位集合
const unitList=ref([]);
function queryUnitList(){
  axios.get("http://localhost:8081/unitList")
      .then((response)=>{
        unitList.value=response.data;
      })
      .catch((error)=>{
        console.log(error);
      });
}
//声明品牌选项集合
const brandList=ref([]);
function queryBrandList(){
  axios.get("http://localhost:8081/brandList")
      .then((response)=>{
        brandList.value=response.data;
      })
      .catch((error)=>{
        console.log(error);
      });
}
//声明仓库列表集合
const storeList=ref([])
function queryStoreList(){
  axios.get("http://localhost:8081/storeList")
      .then((response)=>{
        storeList.value=response.data;
      })
      .catch((error)=>{
        console.log(error);
      });
}
//定义选择商品类目的对话框状态
const typeDialog=ref(false);
function openTypeDialog(){
  typeDialog.value=true;
  itemCategoryTree();//打开对话框显示类目树
}

//////////////////////////////////////////////////////////////////
//声明tree的配置
const config={
  id:'id',
  label:'label',
  children:'children'
};
//声明tree的引用
const treeRef=ref(null);
//声明树节点数据
const categoryList=ref([]);
//发送请求加载树
function itemCategoryTree(){
  axios.get("http://localhost:8081/categoryList")
      .then((response)=>{
        categoryList.value=response.data;
      })
      .catch((error)=>{
        console.log(error);
      })
}

var pnode=null;//记录当前选中的节点对象
//树节点单击的回调函数
function handleClickNode(node,data){
   pnode=node;
}
//当选择某个类型节点确认关闭对话框
function saveType(){
  if(!(pnode && pnode.children.length==0)){
    ElMessage("必选选中叶子节点........");
    return;
  }
  typeDialog.value=false;
  itemForm.typeId=pnode.id;

}
//向后台发送请求获得商品编码
function getItemCode(){
  axios.get("http://localhost:8081/getCode")
      .then((response)=>{
        itemForm.itemNumer=response.data;
      })
      .catch((error)=>{
        console.log(error);
      })
}

//发送请求提交form表单
function saveItemForm(){
  //处理表单中的数组,将数组转化为字符，赋值给imgs
  itemForm.imgs=itemForm.imgArr.toString();
  console.log(itemForm)
  axios.post(url,itemForm)
      .then((response)=>{
        if(response.data.code==200){
          dialogItemVisible.value=false; //关闭对话框
          //清空表单
          itemForm.id=0;
          itemForm.itemNum='';
          itemForm.itemName='';
          itemForm.typeId='';
          itemForm.placeId='';
          itemForm.brandId='';
          itemForm.supplyId='';
          itemForm.storeId='';
          itemForm.itemDesc='';
          itemForm.itemDate='';
          itemForm.store=0;
          itemForm.endDate='';
          itemForm.price=0.0;
          itemForm.sellPrice=0.0;
          itemForm.vipPrice=0.0;
          itemForm.unitId='';
          queryItemList(1);

        }
        ElMessage(response.data.msg);
      })
      .catch((error)=>{
        console.log(error);
      })
}
////////////////////////////////////////分页//////////////////////////////////
const parentBorder = ref(false)
const childBorder = ref(false)
//声明商品列表集合
const itemList=ref([]);
//声明总记录数
const total=ref(0);
const currentPage=ref(1);
//封装查询条件
const condForm=reactive({
  itemNum:'',
  itemName:'',
  statue:''
});

//定义函数发送请求加载商品列表
function queryItemList(pageNum){
  //axios.get("http://localhost:8081/itemList?pageNum="+pageNum)
  condForm.pageNum=pageNum; //给封装查询条件的form表单对象中扩展属性值
  axios.post("http://localhost:8081/itemList",condForm)
  .then((response)=>{
    itemList.value=response.data.items;
    total.value=response.data.total;
  })
  .catch((error)=>{
        console.log(error);
   })
}
//定义函数处理图片路径
function doImgs(path){

  return (path+"").split(",")[0];

}
//转化商品状态
function toStatue(statue){
  switch (statue){
    case 0:
      return "上架";
    case 1:
      return "下架";
    case 2:
      return "删除";
  }
}

//定义分页按钮回调函数
function handlerPageChange(pageNum){
  currentPage.value=pageNum;
  queryItemList(pageNum);
}
//加载调用函数
onMounted(function(){
  queryItemList(1)

})
////////////////////////////定义form表单封装查询条件/////////////////////////

function  queryCondItem(){
  queryItemList(1);
  //queryItemList()
  currentPage.value=1;
}

//定义函数发生商品的下架请求
function downItem(id){
  axios.get("http://localhost:8081/downItem/"+id)
  .then((response)=>{
    if(response.data.code==200){
      //刷新列表
      queryItemList(1);
    }
    ElMessage(response.data.msg);
  })
      .catch((error)=>{
        console.log(error);
      })
}
//声明集合保存需要回显的图片路径
const imageUrls=ref([]);
//打开商品信息回显对话框
function editItem(row){
  url="http://localhost:8081/updateItem"; //处理更新请求的接口
  dialogItemVisible.value=true;
  //调用函数加载供应商列表
  loadSupplyList();
  //加载商品产地选项
  loadPlaceList();
  //加载商品单位选项
  queryUnitList();
  //加载商品品牌选项
  queryBrandList();
  //加载仓库选项
  queryStoreList();

  //给imageUrls赋值
  imageUrls.value=row.imgs.split(",");
  //imgArr保存原始的图片路径，如果不修改图片，即不重新上传图片
  itemForm.imgArr=row.imgs.split(",");
  itemForm.id=row.id;
  itemForm.itemNum=row.itemNum;
  itemForm.itemName=row.itemName;
  itemForm.typeId=row.typeId;
  itemForm.placeId=row.placeId;
  itemForm.brandId=row.brandId;
  itemForm.supplyId=row.supplyId;
  itemForm.storeId=row.storeId;
  itemForm.itemDesc=row.itemDesc;
  itemForm.itemDate=row.itemDate;
  itemForm.endDate=row.endDate;
  itemForm.price=row.price;
  itemForm.store=row.store;
  itemForm.sellPrice=row.sellPrice;
  itemForm.vipPrice=row.vipPrice;
  itemForm.unitId=row.unitId;


}
///////////////////////////////商品采购部分///////////////////////////////
//声明商品采购表单
const buyForm=reactive({
  productId:'',
  storeId:'',
  supplyId:'',
  placeId:'',
  itemName:'',
  storeName:'',
  supplyName:'',
  placeName:'',
  buyNum:'',
  buyUser:'',
  phone:''


})
//声明变量控制对话框状态
const buyDialog=ref(false);
//定义函数打开采购对话框
function openBuyDialog(id){
  console.log("====="+id);
  buyDialog.value=true;
  //发送ajax请求，获得需要带入的数据
  axios.get("http://localhost:8081/buyAutoInfo/"+id)
  .then((response)=>{
    //获得响应数据对象
    var item=response.data;
    //将响应数据赋值给buyForm表单
    buyForm.productId=item.id;
    buyForm.itemName=item.itemName;
    buyForm.storeId=item.storeId;
    buyForm.storeName=item.storeName;
    buyForm.supplyId=item.supplyId;
    buyForm.supplyName=item.supplyName;
    buyForm.placeId=item.placeId;
    buyForm.placeName=item.placeName;

  })
  .catch((error)=>{
    console.log(error);
  });
}
//定义函数发生保存采购单的请求
function saveBuyOrder(){
  axios.post("http://localhost:8081/saveBuyList",buyForm)
  .then((response)=>{
    if(response.data.code==200){
      buyDialog.value=false;//关闭对话框
      //清空buyForm表单
      buyForm.productId='';
      buyForm.itemName="";
      buyForm.storeId='';
      buyForm.storeName='';
      buyForm.supplyId='';
      buyForm.supplyName='';
      buyForm.placeId='';
      buyForm.placeName='';
      buyForm.buyUser='';
      buyForm.phone='';
      buyForm.buyNum='';;

    }
    ElMessage(response.data.msg);
  })
  .catch((error)=>{
    console.log(error);
  })
}
//声明出库对话框状态
const itemOutDialog=ref(false);
//声明商品出库form表单
const outForm=reactive({
  itemName:'',
  storeName:'',
  store:0,
  outNum:0
});

//定义函数打开商品出库对话框
function openOutDialog(row){
  itemOutDialog.value=true;
  //outForm表单赋值实现数据带入
  outForm.itemName=row.itemName;
  outForm.store=row.store;
  outForm.storeName=row.storeName;
  outForm.id=row.id;
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>


<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

::v-deep .el-tree-node.is-current > .el-tree-node__content {
  background-color:darkblue !important; /* 修改为你想要的颜色 */
}


.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>